window.onload = function() {
	var drag = document.getElementById('drag');
	var sqBox = document.getElementById('sqBox');
	drag.onmousedown = function(event) {
		var event = event 
		var diffX = event.clientX - drag.offsetLeft;
		var diffY = event.clientY - drag.offsetTop;
		if (typeof drag.setCapture !== 'undefined') {
			drag.setCapture();
		}
		document.onmousemove = function(event) {
			var event = event 
			var moveX = event.clientX - diffX;
			var moveY = event.clientY - diffY;
			if (moveX < 0) {
				moveX = 0
			} else if (moveX > sqBox.clientWidth - drag.offsetWidth) {
				moveX = sqBox.clientWidth - drag.offsetWidth ;
			}
			if (moveY < 0) {
				moveY = 0
			} else if (moveY > sqBox.clientHeight- drag.offsetHeight) {
				moveY = sqBox.clientHeight - drag.offsetHeight ;
			}
			drag.style.left = moveX + 'px';
			drag.style.top = moveY + 'px';
		}
		document.onmouseup = function(event) {
			this.onmousemove = null;
			this.onmouseup = null;
		}
	}
}
